<template>
	<view class="ranking-layout">
		<view class="ranking-list">
			<view class="ranking-list-item" v-for="item in menuList" :key="item.type" @tap="didSelectItem(item)">
				<text>{{item.name}}</text>
				<xh-icon icon="icon_jiantou"></xh-icon>
				<view class="line"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	const menuList = reactive([{
			name: '交易排行',
			type: 1
		},
		{
			name: '机具排行',
			type: 2
		},
		{
			name: '商户排行',
			type: 3
		}
	])
	const didSelectItem = (item)=>{
		if(item.type == 1){
			uni.navigateTo({
				url:'/pages/home/ranking/trade-ranking/trade-ranking'
			})
		}
		else if(item.type == 2){
			uni.navigateTo({
				url:'/pages/home/ranking/device-ranking/device-ranking'
			})
		}
		else{
			uni.navigateTo({
				url:'/pages/home/ranking/merchant-ranking/merchant-ranking'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.ranking-layout {
		padding-top: 1px;

		.ranking-list {
			background-color: #fff;

			.ranking-list-item {
				position: relative;
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
</style>